<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>列表渲染</title>
</head>

<body>

  <!--
       v-for可以用来遍历数组和对象的属性


       key属性
          - 建议尽可能在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升
          - 不要使用对象或数组之类的非基本类型值作为v-for的key，请用字符串或数值类型的值

-->

  <div id="app">
    <h2>遍历数组</h2>
    <ul>
      <li v-for="(item, index) in persons" :key="index">
        {{ index }}--{{ item.name }}--{{ item.age }}
        --<button @click="deleteP(index)">删除</button>
        --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
      </li>
    </ul>
    <button @click="addP({name: 'xfzhang', age: 18})">添加</button>

    <h2>遍历对象</h2>
    <ul>
      <li v-for="(item, key) in persons[1]" :key="key">{{ key }} => {{ item }}</li>
    </ul>

  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        persons: [
          { name: 'Tom', age: 18 },
          { name: 'Jack', age: 17 },
          { name: 'Bob', age: 19 },
          { name: 'Mary', age: 16 }
        ]
      },

      methods: {
        deleteP(index) {
          this.persons.splice(index, 1) 
        },

        updateP(index, newObject) {

          // this.persons[index] = newObject; // 这种写法不会导致页面被该改变，因为vue只会监听persons值的改变，而不会监听persons内部数据的改变
          // this.persons = []; // 会导致页面重新渲染
          this.persons.splice(index, 1, newObject) // 调用了不是原生数组的splice(), 而是vue提供的变异方法
        },

        addP(newObject) {
          this.persons.push(newObject)
        }
      }
    })
  </script>
</body>

</html>